<template>
    <div class="order-detail-container">
        <div class="goods-list">
            <van-card v-for="item in order.products" :key="item.id" :num="item.count" :price="item.price"
                :title="item.title" :desc="item.spec" :thumb="item.pic"
                class="goods-card" />
        </div>
        <van-cell title="订单备注" :value="order.remark" label="" class="order-remark-cell" />
        <van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" class="delivery-info-cell" />
        <van-cell title="收货地址" class="shipping-address-cell">
            <template #label>
                <div>{{ order.address.name }} {{ order.address.tel }}</div>
                <div>{{ order.address.city + order.address.county + order.address.address_detail }}</div>
            </template>
        </van-cell>
        <div class="fee-info">
            <van-cell title="商品金额" :value="`¥${orderAmount}`" class="fee-cell" />
            <van-cell title="运费" :value="`¥0.00`" class="fee-cell" />
            <van-cell title="总价" :value="`¥${orderAmount}`" class="fee-cell" />
        </div>
        <div v-if="order.id && order.status === 0" class="payment-button-container">
            <van-button type="primary" size="large" @click="payNow" class="payment-button">去支付</van-button>
        </div>
        <div v-if="order.id" class="delete-button-container">
            <van-button type="danger" size="large" @click="onClickDelete" class="delete-button">删除订单</van-button>
        </div>
    </div>
</template>

<script>
import { showToast, Loading } from 'vant';

export default {
    data() {
        return {
            order: {
                products: []
            },
            APIDomainName: 'https://example.com/'
        };
    },
    props: ["id"],
    computed: {
        orderAmount() {
            let amount = 0;
            this.order.products.forEach(item => {
                amount += item.count * item.price;
            });
            return amount.toFixed(2);
        }
    },
    created() {
        this.getOrder();
    },
    methods: {
        getOrder() {
            try {
                const orderHistoryStr = localStorage.getItem('orderHistory');
                if (!orderHistoryStr) {
                    console.log('本地存储中没有找到订单历史数据');
                    return null;
                }
                const orderHistory = JSON.parse(orderHistoryStr);
                const targetOrder = orderHistory.find(order => order.id === parseInt(this.id));
                if (targetOrder) {
                    console.log(`找到 ID 为 ${this.id} 的订单`);
                    this.order = targetOrder;
                    return targetOrder;
                } else {
                    console.log(`未找到 ID 为 ${this.id} 的订单`);
                    return null;
                }
            } catch (error) {
                console.error('获取订单数据时出错:', error);
                showToast('获取订单信息失败');
                return null;
            }
        },
        payNow() {
            try {
                // 保存订单ID到本地存储，用于支付成功后查询（注：此处仅为示例，实际需配合后端逻辑）
                localStorage.setItem('pendingPaymentOrderId', this.id);
                
                // 跳转到支付页面
                this.$router.push({
                    name: 'PaymentPage',
                    params: { orderId: this.id }
                });
            } catch (error) {
                console.error('跳转到支付页面失败:', error);
                showToast('支付页面加载失败，请稍后再试');
            }
        },
        onClickDelete() {
            try {
                let orderHistoryStr = localStorage.getItem('orderHistory');
                if (!orderHistoryStr) {
                    showToast('本地存储中没有订单数据');
                    return;
                }
                let orderHistory = JSON.parse(orderHistoryStr);
                orderHistory = orderHistory.filter(order => order.id !== parseInt(this.id));
                localStorage.setItem('orderHistory', JSON.stringify(orderHistory));
                showToast("订单已删除");
                setTimeout(() => {
                    this.$router.back();
                }, 1000);
            } catch (error) {
                console.error('删除订单失败', error);
                showToast('删除订单失败，请稍后再试');
            }
        },
    },
};
</script>
<style lang="less" scoped>
@bg-color: #f8f8f8;
@card-bg-color: #fff;
@primary-color: #007bff;
@danger-color: #dc3545;
@text-color: #333;
@secondary-text-color: #666;

.order-detail-container {
    background-color: @bg-color;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

   .goods-list {
        margin-bottom: 15px;

       .goods-card {
            margin: 10px 0;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            background-color: @card-bg-color;

           .van-card__content {
                justify-content: space-evenly;
            }

           .van-card__title {
                font-size: 16px;
                color: @text-color;
            }

           .van-card__num {
                font-size: 14px;
                color: @text-color;
            }
        }
    }

   .order-remark-cell,
   .delivery-info-cell,
   .shipping-address-cell,
   .fee-cell {
        background-color: @card-bg-color;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        color: @text-color;
    }

   .fee-info {
        margin-bottom: 15px;
    }

   .payment-button-container,
   .delete-button-container {
        text-align: center;
        margin-bottom: 10px;
    }

   .payment-button {
        background-color: @primary-color;
        border-radius: 5px;
        transition: background-color 0.3s ease;

        &:hover {
            background-color: darken(@primary-color, 10%);
        }
    }

   .delete-button {
        background-color: @danger-color;
        border-radius: 5px;
        transition: background-color 0.3s ease;

        &:hover {
            background-color: darken(@danger-color, 10%);
        }
    }
}
</style>